import React, { Component } from "react";
// import Top from "../../component/Top/top";
import { LeftOutline } from "antd-mobile-icons";

class View extends Component {
  // component = { Top };
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      contentText: "",
    };
    this.backText = this.backText.bind(this);
  }

  componentDidMount() {
    let a = JSON.parse(window.localStorage.getItem("talk"));
    this.setState({
      list: a,
    });
    window.addEventListener("scroll", this.bindHandleScroll);
    // console.log(
    //   (this.refs.ulheight.scrollTop = this.refs.ulheight.scrollHeight)
    // );
    this.scrollToBottom();
  }
  change(e) {
    let contentText = e.target.value;
    this.setState({
      contentText: contentText,
    });
  }
  scrollToBottom() {
    if (this.messagesEnd) {
      const scrollHeight = this.messagesEnd.scrollHeight; //里面div的实际高度  2000px

      const height = this.messagesEnd.clientHeight; //网页可见高度  200px
      // console.log(height);
      // const maxScrollTop = scrollHeight - height;

      // console.log(this.messagesEnd.scrollTop);
      // console.log(this.messagesEnd.height);

      // this.messagesEnd.scrollTop = scrollHeight;
      //如果实际高度大于可见高度，说明是有滚动条的，则直接把网页被卷去的高度设置为两个div的高度差，实际效果就是滚动到底部了。
    }
  }
  // bindHandleScroll(e) {
  //   console.log(e);
  // }
  sendText() {
    // console.log(this.state);
    if (this.state.list) {
      this.setState({
        list: [
          ...this.state.list,
          { type: "mine", content: this.state.contentText },
        ],
      });
    } else {
      this.setState({
        list: [{ type: "mine", content: this.state.contentText }],
      });
    }

    // let that = this;
    // this.list = [...this.list, {type: "mine", content: this.contentText}];//通过type字段进行区分是自己（mine）发的还是系统（robot）返回的
    this.backText();
  }
  backText() {
    let backtext = "";
    let that = this;
    let contentText = this.state.contentText;
    if (window.WebSocket) {
      let ws = new WebSocket("ws://localhost:8080");
      ws.onopen = function (e) {
        console.log("链接服务器成功");
        console.log("that.contentText is", contentText);
        ws.send(contentText);
        that.setState({
          contentText: "",
        });
      };
      ws.onclose = function (e) {
        console.log("服务器关闭");
      };
      ws.onerror = function () {
        console.log("服务器出错");
      };
      ws.onmessage = function (e) {
        backtext = e.data;
        that.setState({
          list: [...that.state.list, { type: "robot", content: backtext }],
        });
        window.localStorage.setItem("talk", JSON.stringify(that.state.list));
        // that.list.push([...that.list, { type: "robot", content: e.data }]);
      };
    }
  }

  render() {
    const { list, contentText } = this.state;
    return (
      <>
        {/* <Top
          leftto="/message"
          leftioc={<LeftOutline fontSize={16} color="#fff" />}
          title="阿猫阿狗"
          rightto=""
          rightioc=""
        ></Top> */}
        <div
          className="talk_div"
          ref={(el) => {
            this.messagesEnd = el;
          }}
        >
          <ul>
            {list ? (
              list.map((item, index) => {
                return (
                  <li key={index}>
                    <div className={item.type === "mine" ? "mine" : "robot"}>
                      <img src={require("./img/tx.png").default} />
                      <span>{item.content}</span>
                    </div>
                  </li>
                );
              })
            ) : (
              <div></div>
            )}
          </ul>
        </div>
        <div className="talk_send">
          <input
            type="text"
            placeholder="方式开发建设"
            value={contentText}
            onChange={(e) => this.change(e)}
          />
          <button onClick={() => this.sendText()}>发送</button>
        </div>
      </>
    );
  }
}
export default View;
